<template>
  <div class="pagination">
    <ul class="pagination-btns">
      <!-- 最前面的左箭头按钮 -->
      <li @click="count" :class="{disabled:myCurrentPage<=1}">
        <span class="iconfont icon-115fangxiang_xiangzuo"></span>
      </li>
      <li :class="{active:myCurrentPage===1}" @click="myCurrentPage = 1">
        1
      </li>
      <!-- 省略号 -->
      <li v-if="startEnd.start >2">
        <span >...</span>
      </li>
      <!-- 中间按钮 -->
      <li
        v-for="(number,index) in startEnd.end-startEnd.start +1"
        :key="startEnd.start+index"
        :class="{active:myCurrentPage === startEnd.start+index}"
        @click="myCurrentPage = startEnd.start + index"
      >
        {{ startEnd.start + index }}
      </li>
      <li 
       v-if="startEnd.end < totalPage -1"
      >
        <span >...</span>
      </li>
      <li
        v-if="totalPage> 1"
        :class="{active:myCurrentPage === totalPage}"
        @click=" myCurrentPage = totalPage"
      >
        {{ totalPage }}
      </li>
      <!-- 最后面的右箭头按钮 -->
      <li @click="add" :class="{disabled:myCurrentPage >= totalPage}">
        <span class="iconfont icon-113fangxiang_xiangyou"></span>
      </li>
    </ul>
    <select class="pagination-select" v-model="myPageSize" >
      <option :value="5">每页 5 条</option>
      <option :value="10">每页 10 条</option>
      <option :value="15">每页 15 条</option>
      <option :value="20">每页 20 条</option>
    </select>
    <span class="pagination-total">总 {{ total }} 条</span>
  </div>
</template>

<script>
  export default {
    name: "Pagination", 
    props:{
        //当前页码
       currentPage:{
           type:Number,
           default:1
        },
        //每页条数
        pageSize:{
          type:Number,
          default:5
        },
        total:{
          type: Number,
          default: 0,
        }
    },
    data(){
        return {
           myCurrentPage:this.currentPage,
           myPageSize:this.pageSize, 
           isEmit: false,//一个开关
        }
    },
    computed:{
        //计算出总页数
        totalPage(){
            return Math.ceil(this.total/this.myPageSize)
        },
        startEnd(){
          const { myCurrentPage ,totalPage}  = this
          let start =myCurrentPage -2
          let end = start + 4
          //特殊情况，总页数等于1页时
          if (totalPage <= 1){
            //start=2是为了让第一个省略号隐藏
            return { start:2 , end:1 }
          }
          //start不能小于2
          if(start<2) start = 2
          //总页数小于7页时，全部展示
          if(totalPage <=7){
            return { start:2 , end:totalPage-1}
          }

          //场景5，没有后面的省略号
          if (end > totalPage - 1){
            end = totalPage - 1
            start = end-4
           }
          return {start,end}
        }
    },
    methods:{
      count(){
        if(this.myCurrentPage <=1) return
        this.myCurrentPage--

      },
      add(){
        if(this.myCurrentPage >= this.totalPage ) return
        this.myCurrentPage++
      }
    },
    watch:{
      myPageSize(myPageSize){
        //当每页条数变化时，可能当前页码超出的最大的页数
        let {myCurrentPage , totalPage } = this
        if(myCurrentPage > totalPage){
          this.isEmit = true
          //开关关上后，
          //这里更改会就不会触发下面的myCurrentPage的监视函数
          this.myCurrentPage = totalPage  //注意：这里更改会触发下面的监视函数，所有要设置一个开关
          myCurrentPage = totalPage
        }

        //触发事件
        this.$emit("size-change",myPageSize,myCurrentPage)
      },
      myCurrentPage(myCurrentPage){
        if (this.isEmit) {
          this.isEmit = false;
          return;
        }
        //触发事件
        this.$emit("current-change" ,myCurrentPage )
      }


    }
  }
</script>

<style lang="less" scoped>
.pagination {
  display: flex;
  justify-content: center;
}
.pagination-btns {
  display: flex;
  li {
    width: 30px;
    height: 30px;
    background-color: #f4f4f5;
    color: #606266;
    font-weight: 700;
    margin-right: 10px;
    text-align: center;
    line-height: 30px;
    border-radius: 2px;
    cursor: pointer;
    &.active {
      background-color: #409eff;
      color: #fff;
    }
    &.disabled {
      color: #c0c4cc;
      cursor: not-allowed;
    }
  }
}
.pagination-select {
  outline: none;
  border: 1px solid #ccc;
  border-radius:3px;
  font-size: 13px;
  margin: 0 20px 0 10px;
}
.pagination-total {
  font-size: 16px;
  line-height: 30px;
}
</style>